import React from 'react';
import { observer } from 'mobx-react-lite';
import ReactEcharts from 'echarts-for-react';

export const ProjectDistribution = observer(() => {
  const option = {
    color: ['#3398DB'],
    tooltip: {},
    radar: {
      name: {
        textStyle: {
          color: '#111',
          backgroundColor: '#fff',
          borderRadius: 3,
          padding: [3, 5],
        },
      },
      indicator: [
        { name: 'Power', max: 100 },
        { name: 'ICT', max: 100 },
        { name: 'Transport', max: 100 },
        { name: 'Toursim', max: 100 },
        { name: 'Water&Sa=Sinatation', max: 100 },
        { name: 'Munisipal', max: 100 },
        { name: 'Agribusiness', max: 100 },
        { name: 'Health', max: 100 },
        { name: 'Education', max: 100 },
      ],
    },
    series: [{
      name: 'Project Distribution',
      type: 'radar',
      data: [
        {
          value: [50, 80, 70, 90, 100, 20, 95, 66, 88],
          name: 'Project Distribution',
          areaStyle: {
            color: '#72ACD1',
            offset: 1,
          },
        },
      ],
    }],
  };


  return (
    <ReactEcharts option={option}/>
  );
});
